@import "default";

.a-process-log {
  padding: 20px;
  box-sizing: border-box;

  .ant-timeline-item-head {
    & img {
      width: 14px;
      transform: translate(0, -1px);
    }
  }

  & > {
    .ant-timeline-item-content {
      .a-process-log-item-title {
        color: @default-text-333-color;
        font-size: 14px;
        font-weight: 500;
      }

      .a-process-log-item-content {
        background: rgba(50, 150, 250, 0.1);
        border-radius: 9px;
        padding: 12px;
        box-sizing: border-box;

        .a-process-log-item-content-title {
          display: flex;
          max-height: 45px;
          align-items: center;

          .a-process-log-item-content-title-avatar {
            display: flex;
            flex-direction: column;
            margin-left: 7px;

            > span:first-child {
              color: @default-text-333-color;
              font-size: 13px;
            }

            > span:last-child {
              color: @default-text-999-color;
              font-size: 10px;
            }
          }

          & img {
            width: 30px;
          }
        }

        .a-process-log-item-content-description {
          display: flex;
          color: @default-text-999-color;
          margin: 5px 0;

          > span:first-child {
            flex: 1;
          }

          > span:last-child {
            flex: 3;
          }
        }

        .a-process-log-item-content-action {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: @default-text-999-color;
        }

        .a-process-log-item-content-file-content {
          .a-process-log-item-content-file-content-item {
            display: flex;
            margin: 8px 0;
            align-items: center;

            .a-process-log-item-content-file-content-item-docx {
              width: 38px;
              height: 38px;
              background: #3296FA;
              border-radius: 4px;
              color: white;
              position: relative;

              > span {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                font-weight: bolder;
                font-size: 25px;
              }
            }

            .a-process-log-item-content-file-content-item-title {
              margin-left: 12px;
              flex: 4;
              display: flex;
              flex-direction: column;

              > span:first-child {
                color: #666666;
                font-size: 13px;
              }

              > span:last-child {
                font-size: 10px;
                color: @default-text-999-color;
              }
            }

            .a-process-log-item-content-file-content-item-action {
              > img {
                width: 4px;
              }
            }
          }
        }
      }
    }
  }
}
